<template>
	<view>
		<view class="d1">
			<image :src="'http://124.93.196.45:10001'+detail.sellerInfo.imgUrl"></image>
			<view class="d2">
				<text>{{detail.sellerInfo.name}}</text>
				<text>总计：{{detail.orderInfo.amount}}</text>
				<text>个人信息：</text>
				<view class="d3">
					<text>{{detail.orderInfo.receiverName}}</text>
					<text>{{detail.orderInfo.receiverPhone}}</text>
				</view>
				<text>{{detail.orderInfo.receiverAddress}}</text>
				<view class="d5">
					<u-button type="primary" :text="value" 
					style="width: 80px;" v-if="detail.orderInfo.status!='退款'" @click="clickty"></u-button>
					<u-button type="error" :text="status" style="width: 80px;" 
					@click="key=true" :disabled="disable"></u-button>
				</view>
			</view>
		</view>
		<view class="c1" v-for="item in list">
			<image :src="'http://124.93.196.45:10001'+item.productImage"></image>
			<view class="c2">
				<text>{{item.productName}}</text>
				<text>单价：{{item.productPrice}}</text>
				<text>数量：{{item.quantity}}</text>
				<text>小计：{{item.productPrice*item.quantity}}</text>
			</view>
		</view>
		<u-popup mode="center" :show="key" :closeable="true" @close="key=false">
			<view class="p1">
				<textarea placeholder="请输入退款理由" v-model="reason"></textarea>
				<u-button type="primary" text="确定" style="width: 80px; margin-top: 20px;" @click="tuikuan"></u-button>
			</view>
		</u-popup>
		<u-popup :show="key2" :closeable="true" @close="key2=false">
			<view class="p2">
				<text style="font-size: 27px;">请选择支付方式</text>
				<u-radio-group>
					<u-radio v-for="item in pay" :label="item.paymentType" :label-size="20" :name="item.paymentType"
					style="margin-left: 20px; margin-top: 20px;" @change="clickpay" ></u-radio>
				</u-radio-group>
				<view class="p6" style="margin-top: 40px; text-align: center; margin-bottom: 40px;">
					<text style="font-size: 24px;">{{detail.orderInfo.amount}}￥</text>
				</view>
				<u-button  color="#00ca5e" text="确认支付" style="width: 100px; margin-bottom: 30px;" @click="payment"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail:{},
				order:'',
				list:[],
				reason:'',
				key:false,
				status:'退款',
				disable:false,
				pay:[
					{
						paymentType:'微信支付',
						disable:false
					},
					{
						paymentType:'支付宝',
						disable:false
					},
					{
						paymentType:'电子支付',
						disable:false
					}
				],
				paymentType:'',
				key2:false,
				value:''
			}
		},
		onLoad(options) {
			this.order=options.order
			this.getdetail()
		},
		methods: {
			getdetail(){
				this.api.get('/prod-api/api/takeout/order/'+this.order).then(res=>{
					this.detail=res.data.data
					this.value=this.detail.orderInfo.status
					this.list=res.data.data.orderInfo.orderItemList
					if(this.detail.orderInfo.status==='退款'){
						this.status='已退款'
						this.disable=true
					}else if(this.detail.orderInfo.status==='完成'){
						this.disable=true
						this.value='再来一单'
					}
				})
			},
			tuikuan(){
				if(this.reason===''){
					uni.showToast({
						title:'理由为空',
						icon:'error'
					})
					return
				}
				const data={
					orderNo:this.order,
					reason:this.reason
				}
				this.api.get('/prod-api/api/takeout/order/refound','POST',data).then(res=>{
					if(res.data.code===200){
						setTimeout(function(){
							uni.showToast({
								title:'退款成功'
							})
						},700)
						this.getdetail()
					}else{
						console.log(res.data)
					}
					this.key=false
				})
			},
			clickpay(e){
				this.paymentType=e
				console.log(this.paymentType)
			},
			payment(){
				if(this.paymentType===''){
					uni.showToast({
						title:'请选择方式',
						icon:'error'
					})
					return
				}
				const data={
					orderNo:this.order,
					paymentType:this.paymentType
				}
				this.api.get('/prod-api/api/takeout/pay','POST',data).then(res=>{
					if(res.data.code===200){
						setTimeout(function(){
							uni.showToast({
								title:'支付成功'
							})
						},700)
						this.getdetail()
					}else{
						console.log(res.data)
						setTimeout(function(){
							uni.showToast({
								title:'支付失败',
								icon:'error'
							})			
						},700)
						this.paymentType=''
					}
					this.key2=false
				})
			},
			clickty(){
				if(this.detail.orderInfo.status==='待支付'){
					this.key2=true
				}else if(this.detail.orderInfo.status==='待评价'){
					uni.navigateTo({
						url:'/pages/other/takaway/comment/comment?order='+this.order
					})
				}else{
					uni.navigateTo({
						url:'/pages/other/takaway/takeawayDetail/takeawayDetail?id='+this.detail.sellerInfo.id
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.d1{
	display: flex;
	image{
		width: 150px;
		height: 150px;
		border-radius: 15px;
		margin-top: 15px;
	}
	.d2{
		margin-top: 10px;
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		line-height: 30px;
		.d3{
			display: flex;
			justify-content: space-between;
		}
		.d5{
			display: flex;
		}
	}
}
.c1{
	display: flex;
	border-top: 2px solid salmon;
	border-bottom: 2px solid salmon;
	height: 175px;
	image{
		width: 150px;
		height: 150px;
		border-radius: 15px;
		margin-left: 20px;
		margin-top: 10px;
	}
	.c2{
		display: flex;
		flex-direction: column;
		margin-left: 20px;
		line-height: 30px;
		margin-top: 10px;
	}
}
</style>
